<template>
  <view class="product">
    <v-image
      height="190rpx"
      width="190rpx"
      :src="product.image"
      mode="aspectFill"
    />
    <view class="product-info">
      <view class="name">
        <text v-if="product.activity_type === 'HANDY_SPU'" class="activity">
          【顺手买】
        </text>
        <text>{{ product.spu_name }}</text>
      </view>
      <view class="spec-info">
        {{ product.sku_spec_info?.map((item) => item.value).join('; ') }}
      </view>
      <view class="footer">
        <v-price size="32rpx" :price="product.sell_price" />
        <view class="quantity">
          {{ product.quantity ? `x${product.quantity}` : '' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  product: OrderGenerateVO;
}>();
</script>

<style lang="scss" scoped>
.product {
  display: flex;
  align-items: stretch;
  .product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 24rpx;
    .name {
      font-weight: bold;
      margin-bottom: 12rpx;
      .activity {
        color: #ff2f3b;
        margin-right: 3rpx;
      }
    }
    .spec-info {
      flex: 1;
      min-height: 0;
      margin-bottom: 20rpx;
      font-size: 24rpx;
      color: #666666;
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .quantity {
        color: #999999;
      }
    }
  }
}
</style>
